
import React from "react";
import { Button, Checkbox, Form, Input } from "antd";
//样式
import "../style/login.css";

export default function Register() {
    //登录提交表单
    const onFinish = (values) => {
        console.log("Success:", values);
    };
    //表单提交失败时
    const onFinishFailed = (errorInfo) => {
        console.log("Failed:", errorInfo);
    };
    //记住密码   
    const onChange = (e) => {
        console.log(`checked = ${e.target.checked}`);
    };

    return (
        <div style={{ display: "flex" }} className="box" >
            <div style={{ width: '30%', height: '100%', backgroundColor: '#fff', boxShadow: ' 5px 9px 30px 0px rgba(83, 122, 237, 0.52)' }}>
                
                <div style={{ width: '250px', height: '50px', margin: 'auto', marginTop: '70px' }}>
                    <img src={"../src/images/head.png"} style={{ width: '100%' }} />
                </div>

                <div style={{ margin: 'auto', width: '250px', fontSize: '23px', paddingTop: '25px',fontWeight:'bold'}}>Welcome To Register</div>
                <div style={{ margin: 'auto', width: '250px', fontSize: '20px', paddingTop: '25px',fontWeight:'bold' }}>欢迎注册考试系统</div>
                <div
                    style={{
                        width: "80px",
                        height: "80px",
                        margin: "auto",
                        marginTop: "25px",
                    }}
                >
                    <img src={'../src/images/photo.png'} style={{ width: '100%' }} />
                </div>
                {/* 输入框 */}
                <div style={{ width: '100%', marginTop: '25px' }}>
                    <Form
                        name="basic"
                        labelCol={{
                            span: 6,
                        }}
                        wrapperCol={{
                            span: 14,
                        }}
                        initialValues={{
                            remember: true,
                        }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="账号"
                            name="phone"
                            rules={[
                                {
                                    required: true,
                                    message: "请输入你的账号",
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="密码"
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: "请输入你的密码!",
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="确认密码"
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: "请确认你的密码!",
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                    
                        <Form.Item
                            wrapperCol={{
                                offset: 6,
                                span: 16,
                            }}
                        >
                            <Button type="primary" htmlType="submit" style={{ width: '88%' }}>
                                注册
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
            <div style={{ width: '350px', height: '150px', marginTop: '86px', marginLeft: '86px' }}>
                <div style={{ color: '#949fcd', fontSize: '30px', marginBottom: '10px' }}>SYSTEM</div>
                <div style={{ color: '#949fcd', fontSize: '16px', marginBottom: '10px' }}>Background management system</div>
                <div style={{ color: '#949fcd', fontSize: '20px' }}>高效  |  专业  |  智能</div>
            </div>
        </div>
    );
}